<template>
	<view>
		<my-search @myclick="handleClick"></my-search>
	<view class="cate_cantinue">
		<!-- 左侧滚动区域 -->
		<!-- 一级分类列表 -->
		<scroll-view class="left" scroll-y :style="{height: w + 'px'}">
			<block v-for="(item,i) in cateList" :key="i">
			 <view :class="['left-item', active === i ? 'active' : '']" @click="activeChange(i)">{{item.cat_name}}</view>
			</block>
		</scroll-view>
		<!-- 右侧滚动区域 -->
		<!-- 二级分类列表 -->
		<scroll-view class="right" scroll-y :style="{height: w + 'px'}" :scroll-top="scrollTop">
			<view class="cateLv2" v-for="(item2,i2) in cateLv2" :key="i2">
				<view class="cateLv2-item">/{{item2.cat_name}}/</view>
				<!-- 三级分类列表 -->
				<view class="cateLv3">
					<view class="cateLv3-item" v-for="(item3,i3) in item2.children" :key="i3" @click="gotoList(item3)">
						<!-- 三级分类图片 -->
						<image :src="item3.cat_icon"></image>
						<!-- 三级分类文本 -->
						<text>{{item3.cat_name}}</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
	</view>
</template>

<script>
	import badgeMix from '@/mixins/badge-tabbar.js'
	export default {
		mixins:[badgeMix],
		data() {
			return {
				// 页面可用高度
				w:0,
				// 一级分类数据
				cateList:[],
				// 激活项
				active:0,
				// 二级分类数据
				cateLv2:[],
				// 优化滚动上升数据
				scrollTop:0
			}
		},
		onLoad() {
			this.getHeight()
			this.getCateList()
		},
		methods: {
		  // 获取页面可用高度
		  getHeight() {
			 const info = uni.getSystemInfoSync()
			 // console.log(info.windowHeight)
			 this.w = info.windowHeight - 50
		  },
		  // 获取分类数据
		 async getCateList() {
			const {data:message} = await uni.$http.get('public/v1/categories')
			// console.log(message)
			if(message.meta.status !== 200) return uni.$showMsg()
			this.cateList = message.message
			// 为二级分类赋值
			this.cateLv2 = message.message[0].children
		  },
		  activeChange(i) {
			  this.active = i
			  // 为二级分类重新赋值
			  this.cateLv2 = this.cateList[i].children
			  // 点击分类以后三级分类返回顶部，当scrollTop都是一样的值时，不会变化，我们赋值为1和0，像素差值小用户看不出来
			  this.scrollTop = this.scrollTop == 0 ? 1 : 0
		  },
		  gotoList(item3){
			  uni.navigateTo({
			  	url:'/subpkg/goods_list/goods_list?cid=' + item3.cat_id
			  })
		  },
		  handleClick() {
			  // console.log('~~~')
			  uni.navigateTo({
			  	url:'/subpkg/search/search'
			  })
		  }
		}
	}
</script>

<style lang="scss" scoped>
	// 一级分类样式
 .cate_cantinue{
	 display: flex;
	 .left,
	 .left-item{
	 	width: 100px;
	 	background-color:#e5e4e4;
		text-align: center;
		line-height: 50px;
		height: 50px;
		font-size: 12px;
		.active{
			background-color: #ffffff;
			position: relative;
			&::before{
				content: '';
				display: block;
				width: 3px;
				height: 30px;
				background-color: #c00000;
				position: absolute;
				top: 50%;
				left: 0;
				transform: translateY(-50%);
			}
		}
	 }
 }
 // 二级分类样式
 .cateLv2{
	 text-align: center;
	 font-size: 14px;
	 font-weight: bold;
	 padding: 15rpx 0;
 }
 // 三级分类样式
 .cateLv3{
	 width: 100%;
	 display: flex;
	 flex-direction: row;
	 flex-wrap: wrap;
	 align-items: center;
	 justify-content: center;
	 .cateLv3-item{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin: 10px;
	 }
	 image{
		 width: 80px;
		 height: 80px;
	 }
	 text{
		 text-align: center;
	 }
 }
</style>
